<template>
	<view style="background-color: #fff; padding: 20rpx 40rpx;padding-bottom: 100rpx;">
		<u-form :model="form" ref="uForm">
			<u-form-item label="姓名">
				<u-input v-model="form.name" placeholder="请输入真实姓名" />
			</u-form-item>
			<u-form-item label="账号">
				<u-input v-model="form.account" placeholder="请输入支付宝账号" />
			</u-form-item>
		</u-form>
		<u-button @click="updateZfbNumber()" shape="circle" :custom-style="customStyle">绑定支付宝</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					account: ''
				},
				customStyle: {
					'background-color': '#962a22',
					'color': '#fff',
					'margin-bottom': '0',
					'margin-top': '80rpx',
				},
			}
		},
		onLoad() {
			let that = this;
			that.$u.api.alipayInfo({}).then(res => {
				that.form.name = res.name;
				that.form.account = res.account;
			})
		},
		methods: {
			updateZfbNumber() {
				let that = this;
				uni.showLoading({
					title: '正在绑定支付宝信息'
				})
				that.$u.api.bindAlipay({
					name: that.form.name,
					account: that.form.account
				}).then(res => {
					uni.hideLoading()
					that.$u.toast('绑定成功');
					that.$u.route({
						type: 'navigateBack',
					})
				})
			}
		}
	}
</script>

<style>
	body {
		background-color: #f5f5f5;
	}
</style>
